<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">学员学习情况统计</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>学员学习情况统计</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            搜索：
            <select id="learn-statistics-search-key">
                <option value="">-请选择-</option>
                <option value="nickName">用户名</option>
                <option value="stitle">学习阶段</option>
            </select>&emsp;
            <input id="learn-statistics-search-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;
            <button id="learn-statistics-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="learn-statistics-btn-curr" class="layui-btn icon-btn">当前阶段</button>
            <button id="learn-statistics-btn-history" class="layui-btn icon-btn">历史阶段</button>
            <button id="learn-statistics-btn-chart" class="layui-btn icon-btn">图表展示</button>
        </div>
    </div>
    <div class="layui-card-body" id="learn-statistics-div">
        <table class="layui-table" id="learn-statistics" lay-filter="learn-statistics-filter"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="learn-statistics-table-bar" >
    <a class="layui-btn layui-btn-primary  layui-btn-xs "  lay-event="learn-grade">打分</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="learn-content">阶段内容</a>
</script>


<script>
    layui.use(['index','form', 'table', 'util', 'config', 'admin','layer'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var index = layui.index;
        var admin = layui.admin;



        // 渲染表格
        table.render({
            elem: '#learn-statistics',
            url: config.base_server + 'api-study/learnRate/query',
            method: 'get',
            where: {
                access_token: config.getToken().access_token,
            },
            page: true,
            height:'full-350',
            cols: [[
                {type: 'numbers' },
                {field: 'nickName',width:100, title: '学员姓名'},
                {field: 'stitle', width:100,title: '阶段'},
                {field: 'statim',width:120, title: '阶段开始时间'},
                {field: 'endtim', width:120, title: '阶段结束时间'},
                {field: 'days', width:100,title: '时间（天）'},
                {field: 'summar', title: '学习总结'},
                {field: 'score', width:100,title: '阶段评分',
                    templet:function(data){
                        if(data.score==='-1'){
                            return '';
                        }else {
                            return data.score;
                        }
                    }
                },
                {field: 'advise', title: '教练评价'},
                {field: 'status',width:100, title: '是否通过',
                    templet:function (data) {
                        if(data.status==1){
                            return '<span class="layui-badge layui-bg-gray">通过</span>';
                        }else {
                            return '<span class="layui-badge layui-bg-green">学习中</span>';
                        }
                    }
                },
                {field: 'isfirst',width:100, title: '首次通过',
                    templet:function (data) {
                        if(data.isfirst===2){
                            return '<span class="layui-badge layui-bg-gray">否</span>';
                        }else if(data.isfirst===1) {
                            return '<span class="layui-badge layui-bg-gray">是</span>';
                        }else {
                            return '<span class="layui-badge layui-bg-green">学习中</span>';
                        }
                    }
                },
                {align: 'center', toolbar: '#learn-statistics-table-bar', title: '操作', width: 250}
            ]],
            limit:20,
            done:function () {
                // 添加按钮绑定权限
                if(!admin.hasPerm('learn:update/grade')) {
                    $('td a:nth-child(1)').hide();
                }
            }
        });

        table.on('tool(learn-statistics-filter)', function (obj) {
            var data = obj.data;
            console.log(data);
            var layEvent = obj.event;
            if (layEvent === 'learn-grade') { // 打分
                learnGrade(data)
            }
            if (layEvent === 'learn-content') { // 查看阶段内容
                learnContent(data)
            }
        });
        //显示阶段内容
        var learnContent = function (data) {
            //console.log(data);
            admin.putTempData('learn_userid', data.userid);
            admin.putTempData('learn_sicode', data.stcode);
            admin.popupCenter({
                title: data.stitle+'内容：'+data.nickName,
                area: ['75%','75%'],
                path: 'pages/learn/learn-content.html',
                finish: function () {
                    table.reload('learn-statistics');
                }
            });
        };
        //显示打分
        var learnGrade = function (data) {
            //console.log(data);
            admin.putTempData('learn_lepcid', data.lepcid);
            admin.putTempData('learn_stcode', data.stcode);
            admin.putTempData('learn_userid', data.userid);
            admin.popupCenter({
                title: data.stitle+'评分：'+data.nickName,
                area: ['30%','50%'],
                path: 'pages/learn/learn-grade.html',
                finish: function () {
                    table.reload('learn-statistics');
                }
            });
        };

        //条件搜索
        $("#learn-statistics-btn-search").click(function () {
            let key = $("#learn-statistics-search-key").val();
            let value = $("#learn-statistics-search-value").val();
            table.reload('learn-statistics', {where: {searchKey: key, searchValue: value}});
        });
        //当前所在阶段
        $("#learn-statistics-btn-curr").click(function () {
            table.reload('learn-statistics', {where: {status:2}});
        });
        //历史所在阶段
        $("#learn-statistics-btn-history").click(function () {
            table.reload('learn-statistics',{where:{status:null},page: {curr: 1 }});
        })
        //图表
        $("#learn-statistics-btn-chart").click(function () {
            admin.popupCenter({
                title: '',
                area: ['75%','75%'],
                path: 'pages/learn/learn-statistics-chart.html',
            });
        })

    });

    /*/!*列合并*!/
    function merge(res) {
        let data = res.data;
        let mergeIndex = 0;//定位需要添加合并属性的行数
        let mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        let firstMark=0;
        let columsName = ['nickName', 'stitle','statim','endtim','days','summar','score'];//需要合并的列名称
        let columsIndex = [1,2,3,4,5,6,7];//需要合并的列索引值
        for (let k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            let trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (let i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                let tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                let tdCurTool = trArr.eq(i).find("td").last();//获取当前行的操作列
                let tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                let tdPreTool = trArr.eq(mergeIndex).find("td").last();//获取相同列的第一列
                if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                    if(urlStatus===0){
                        if(k===0){
                            tdPreTool.each(function () {
                                $(this).attr("rowspan", mark);
                            });
                            tdCurTool.each(function () {
                                $(this).css("display", "none");
                            })
                        }
                    }else if(urlStatus===1){
                        if(k===1){
                            tdPreTool.each(function () {
                                $(this).attr("rowspan", mark);
                            });
                            tdCurTool.each(function () {
                                $(this).css("display", "none");
                            })
                        }
                    }

                } else {
                    // firstMark=mark;
                    // console.log(k,i,firstMark,222);
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
                // if(firstMark!=0&&mark>=firstMark){
                //     mergeIndex = i;
                //     mark=1;
                // }
            }
            // console.log(k,firstMark,222);
            mergeIndex = 0;
            mark = 1;
        }
    }*/
</script>